<template>
    <div class="editor">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import { Boot } from '@wangeditor/editor'
import attachmentModule from '@wangeditor/plugin-upload-attachment'
Boot.registerModule(attachmentModule)
// import { IEditorConfig } from '@wangeditor/editor'
import { getImgList,getVideoList,uploadProtocol } from './../api/guide'
export default{
    components: { Editor, Toolbar },
    props:{
      editorContent: {
        type: String,
        default: ''
      },
    },
    data(){
        return{
            editor: null,
            html: '',
            toolbarConfig: {
                toolbarKeys:[
                    "uploadAttachment",
                    'headerSelect',
                    "blockquote",
                    "|",
                    "bold",
                    "underline",
                    "italic",
                    {
                        iconSvg: "<svg viewBox=\"0 0 1024 1024\"><path d=\"M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path></svg>",
                        key: "group-more-style",
                        menuKeys: ['through', 'code', 'sup', 'sub', 'clearStyle'],
                        title: "更多"
                    },
                    "color",
                    "bgColor",
                    "|",
                    "fontSize",
                    "fontFamily",
                    "lineHeight",
                    "|",
                    "bulletedList",
                    "numberedList",
                    "todo",
                    {
                        iconSvg: "<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>",
                        key: "group-justify",
                        menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify'],
                        title: "对齐"
                    },
                    {
                        iconSvg: "<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>",
                        key: "group-indent",
                        menuKeys: ['indent', 'delIndent'],
                        title: "缩进",
                    },
                    "|",
                    "emotion",
                    "insertLink",
                    {
                        iconSvg: "<svg viewBox=\"0 0 1024 1024\"><path d=\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\"></path></svg>",
                        key: "group-image",
                        menuKeys: ['uploadImage'],
                        title: "图片"
                    },
                    {
                        iconSvg: "<svg viewBox=\"0 0 1024 1024\"><path d=\"M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z\"></path></svg>",
                        key:"group-video",
                        menuKeys: ['uploadVideo'],
                        title: "视频"
                    },
                    "insertTable",
                    "codeBlock",
                    "divider",
                    "|",
                     "undo",
                     "redo",
                     "|",
                     "fullScreen"
                ],
            },
            editorConfig: {
                placeholder: '请输入内容...',
                MENU_CONF:{
                   
                },
                hoverbarKeys: {
                    attachment: {
                    menuKeys: ['downloadAttachment'], // “下载附件”菜单
                    },
                },
            },
            mode: 'default', // or 'simple'
        }
    },
    created(){
        this.setEditor();
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
            console.log(this.editor,'editor');
        },
        setEditor(){
            // this.editor.config.showLinkImg = false;
            this.editorConfig.MENU_CONF['uploadImage'] = {
                // 单个文件的最大体积限制，默认为 2M
                maxFileSize: 5 * 1024 * 1024, // 5M
                // 最多可上传几个文件，默认为 100
                maxNumberOfFiles: 10,
                // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                allowedFileTypes: ['image/*'],
                 // 跨域是否传递 cookie ，默认为 false
                withCredentials: true,
                // onBeforeUpload(files) {
                //     console.log(files,'1111111');
                //     // this.$message({
                //     //     showClose: true,
                //     //     message: '图片正在上传中,请耐心等待'
                //     //  });
                //     // this.$message.warning('图片正在上传中,请耐心等待')
                //     return files;
                // },
                // customInsert(res, insertFn) {
                //     console.log(res, insertFn,'3333333');
                //     // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
                //     // 先关闭等待的Message
                //     if (res.code === 200) {
                //         console.log(res.data.originalName);
                //         // Message.success({
                //         // message: `${res.data.originalName} 上传成功`
                //         // });
                //     } else {
                //         console.log(res.data.originalName);
                //         // Message.error({
                //         // message: `${res.data.originalName} 上传失败，请重新尝试`
                //         // });
                //     }
                //     insertFn(res.data.link, res.data.name, res.data.link);
                // },
                // 用户自定义上传图片
                customUpload(file, insertFn) {
                    const formData = new FormData();
                    formData.append('file', file);
                    getImgList(formData,'editor').then((res) => {
                        console.log(res)
                        if(res.code == 200){
                            insertFn(res.result.absoluteUrl)
                        }
                    });
                }
 

            }
            this.editorConfig.MENU_CONF['uploadVideo'] = {
                // 上传视频的配置
                // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
                allowedFileTypes: ['video/*'],
                 // 跨域是否传递 cookie ，默认为 false
                withCredentials: true,
                onBeforeUpload(file) { 
                    console.log(file,'视频');
                    return file
                },
                 // 用户自定义上传视频
                 customUpload(file, insertFn) {
                    const formData = new FormData();
                    formData.append('file', file);
                    getVideoList(formData,'videoEditor').then((res) => {
                        console.log(res)
                        if(res.code == 200){
                            insertFn(res.result.absoluteUrl)
                        }
                    });
                }

            }
            // 上传附件
            this.editorConfig.MENU_CONF['uploadAttachment'] = {
                timeout: 5 * 1000, // 5s
                maxFileSize: 10 * 1024 * 1024, // 10M
                customUpload(file, insertFn) {
                    const formData = new FormData();
                    formData.append('file', file);
                    console.log('customUpload', file);
                    uploadProtocol(formData,'enclosure').then((res) => {
                        console.log(res,'enclosure');
                        if(res.code == 200){
                            insertFn(`${file.name}`,res.result.absoluteUrl)
                        }
                    })
                }
            }
        },
    },
    mounted() {
        // const toolbar = DomEditor.getToolbar(this.editor)
        // console.log(this.editor.getMenuConfig('uploadImage'),'33333333344');
        // const curToolbarConfig = toolbar.getConfig()
        // console.log( toolbar.getConfig().toolbarKeys ,'333333333') // 当前菜单排序和分组
        // 模拟 ajax 请求，异步渲染编辑器
        // setTimeout(() => {
        //     this.html = '<p>请输入</p>'
        // }, 1500)
    },
    watch:{
        html:{
        handler(newVal ,oldval){
          console.log(newVal,'html');
          this.$emit('change',newVal);
        }
      }
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
}
</script>
<style lang="less" scoped>
.editor{
    // width: 100%;
    border: 1px solid #ccc;
}

</style>